<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <p>{{age}}</p>
    </div>

    <p>
        aaa
    </p>

    <!-- 使用template标签定义模板内容 -->
    <template id="hello">
        <!-- 模板内容必须保证有且只有一个根节点 -->
        <div>
            <h2>{{name}}</h2>
            <p>{{age}}</p>
        </div>
    </template>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            name:'tom',
            age:20
        },
        /*
         * 自定义模板（仍然需要挂载，用于指定挂载位置）
         */
        // template:'<div><h2>{{name}}</h2><p>{{age}}</p></div>'
        template:'#hello', // 引用模板
        /*
         * 定义渲染函数，不会再使用el选项或template选项指定的内容来编译渲染函数
         * 参数createElement是一个用来创建节点的方法，返回页面节点结构
         *      createElement(tagName,attribte,children)
         *          tagName     标签名，必填项
         *          attribute   标签的属性，值为对象类型，可选项
         *          children    标签的子节点，值为字符串或数组，字符串表示文本节点，可选项
         */
        render:function(createElement){
            return createElement(
                'div',
                {
                    attrs:{
                        id:'mydiv',
                        title:'this is a div'
                    },
                    style:{
                        color:'red',
                        border:'1px solid #ccc'
                    }
                },
                [
                   createElement('h3',this.name),
                   createElement('p',this.age)
                ]
            );
        }
    });
    console.log(vm.$el); // Vue 实例使用的根 DOM 元素。
</script>
</html>